<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>微信功能集成示例</title>
  <!-- 引入微信JS-SDK -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <!-- 引入腾讯地图SDK -->
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=N4DBZ-Q2W37-JNHXL-PI6NN-55FH5-2BF74"></script>
  <style>
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }

    #main-container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .map-section {
      padding: 20px;
      background-color: #fff;
    }

    #map-container {
      width: 100%;
      height: 300px;
      margin: 15px 0;
      border-radius: 4px;
      overflow: hidden;
    }

    .control-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background-color: #f8f8f8;
    }

    .share-btn {
      padding: 12px 24px;
      margin: 10px;
      background: #1AAD19;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .share-btn:active {
      background-color: #179B16;
    }

    .location-info {
      padding: 15px;
      background-color: #fff;
      margin: 10px 0;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .loading-spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #1AAD19;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Toast 样式 */
    .toast-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 12px 20px;
      border-radius: 4px;
      font-size: 14px;
      z-index: 10000;
      max-width: 80%;
      text-align: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .toast-container.show {
      opacity: 1;
    }

    .toast-success {
      background: rgba(26, 173, 25, 0.9);
    }

    .toast-error {
      background: rgba(255, 0, 0, 0.8);
    }
  </style>
</head>

<body>
  <div id="main-container">
    <div class="map-section">
      <div id="map-container"></div>
      <div class="control-bar">
        <button class="share-btn" onclick="shareToTimeline()">分享到朋友圈</button>
        <button class="share-btn" onclick="shareToFriend()">分享给朋友</button>
        <button class="share-btn" onclick="getLocation()">获取位置</button>
      </div>
    </div>

    <!-- <div class="location-info" id="locationInfo" style="display: none;">
      <h3>当前位置详情</h3>
      <p><strong>经度：</strong><span id="lng"></span></p>
      <p><strong>纬度：</strong><span id="lat"></span></p>
      <p><strong>地址：</strong><span id="address"></span></p>
    </div> -->

    <div class="location-info" id="locationInfo" style="display: none;">
      <h3>当前位置详情</h3>
      <p><strong>经度：</strong><span id="lng"></span></p>
      <p><strong>纬度：</strong><span id="lat"></span></p>
      <p><strong>地址：</strong><span id="address"></span></p>
    </div>

    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
      <div class="loading-spinner"></div>
    </div>

    <!-- Toast 容器 -->
    <div class="toast-container" id="toastContainer"></div>
    <div id="drss"></div>
  </div>

  <script>
    let wxConfig = null;
    let map = null;
    let markers = [];

    // let latitude  = null
    // let longitude  = null


    // 初始化微信配置
    // 初始化微信配置
    function initWxConfig() {
      fetch("https://www.api.nl9555.com/weChat/JSSDK", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "token": JSON.parse(localStorage.getItem("token")).data,
        },
        body: JSON.stringify({ url: window.location.href.split('#')[0] })
      })
        .then(res => res.json())
        .then(res => {
          wxConfig = res.data;
          wx.config({
            debug: false,
            appId: wxConfig.appId,
            timestamp: wxConfig.timestamp,
            nonceStr: wxConfig.nonceStr,
            signature: wxConfig.signature,
            jsApiList: ["chooseWXPay", "openLocation", "getLocation", "updateAppMessageShareData", "updateTimelineShareData"]
          });

          wx.ready(() => {
            console.log("微信JS-SDK初始化成功");

            wx.getLocation({
              type: 'wgs84', // 坐标类型（'wgs84'为GPS坐标，'gcj02'为火星坐标，用于微信定位）
              success: function (res) {
                var latitude = res.latitude; // 纬度
                var longitude = res.longitude; // 经度
                var speed = res.speed; // 速度（米/秒）
                var accuracy = res.accuracy; // 位置精度（米）

                alert(`经纬度==>${latitude}--${longitude}`)
                getLocation(latitude,longitude)
                // 示例：将定位信息发送到后台
                sendLocationToBackend(latitude, longitude);
              },
              fail: function (err) {
                console.error('获取定位失败：', err);
                // 处理权限拒绝、定位失败等情况
                alert(err)
              }
            });
            initMap();
            wx.hideOptionMenu(); // 隐藏默认菜单
          });



          wx.error(err => {
            console.error("微信初始化失败:", err);
            initMapWithH5Location();
          });
        })
        .catch(err => {
          console.error("获取配置失败:", err);
          initMapWithH5Location();
        });


    }



    // 点击获取当前位置
    async function getLocation(lat,lng) {

      navigator.geolocation.getCurrentPosition((position) => {
          
          // 成功回调
          const { latitude, longitude } = position.coords;
          document.getElementById('drss').innerHTML = `
            纬度：${latitude}<br>
            经度：${longitude}<br>
            <a href="https://maps.google.com?q=${latitude},${longitude}" target="_blank">查看地图</a>
          `;
        },
        (error) => {
          console.error("获取位置失败:", error);
          showErrorToast('获取位置失败，请检查权限');
        }
      );

      // getAddressInfo()
      const result = await getAddressInfo(lat,lng)
      console.log('=====>', result)
      // 地图位置更新
      setCenter(result.location.lat, result.location.lng)
      // 2. 提取接口返回的数据
      // const lng = result.location.lng; // 经度
      // const lat = result.location.lat; // 纬度
      // 地址拼接（省+市+区，根据实际返回值调整）
      const address = `${result.ad_info.nation} ${result.ad_info.province} ${result.ad_info.city} ${result.ad_info.district}`.trim();
      console.log('=>', lng, lat, address)

      // 3. 将数据渲染到页面元素
      document.getElementById('lng').textContent = lng;
      document.getElementById('lat').textContent = lat;
      document.getElementById('address').textContent = address;
      document.getElementById('locationInfo').style.display = 'block';

      
    }

    // 初始化地图（优化版）
    function initMap() {
      // 确保地图容器存在
      const mapContainer = document.getElementById("map-container");
      if (!mapContainer) {
        console.error("地图容器不存在，请检查DOM元素");
        return;
      }

      map = new TMap.Map("map-container", {
        center: new TMap.LatLng(39.9088, 116.3975),
        zoom: 13,
        pitch: 50,
        styleId: "style1"
      });

      // 创建 MultiMarker 图层（修复图标设置）
      multiMarker = new TMap.MultiMarker({
        map: map,
        styles: {
          "default": new TMap.MarkerStyle({
            width: 30,         // 图标宽度
            height: 30,        // 图标高度
            anchor: { x: 0.5, y: 1 }, // 锚点位置（图标底部中心）
            src: "https://www.h5.nl9555.com/share.png", // 图标URL
            // 添加容错图标，当主图标加载失败时显示
            fallbackSrc: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png"
          })
        },
        geometries: []
      });

      // 验证图标URL是否有效
      const testImg = new Image();
      testImg.src = "https://www.h5.nl9555.com/share.png";
      testImg.onerror = () => console.error("标记图标URL无效或无法访问");

      map.on("click", handleMapClick);
    }



    // 处理地图点击事件（优化版）
    async function handleMapClick(e) {
      clearMarkers(); // 清除已有标记
      const position = e.latLng;

      showLoading();
      try {
        const lat = position.getLat();
        const lng = position.getLng();

        // 创建新标记数据
        const newMarker = {
          id: `marker_${Date.now()}`, // 唯一ID
          styleId: "default",         // 使用预定义的样式
          position: new TMap.LatLng(lat, lng)
        };

        // 添加到标记数组
        markers.push(newMarker);

        // 更新图层显示新标记
        multiMarker.setGeometries(markers);
        console.log(multiMarker.getGeometries())

        // 获取地址信息
        const addressInfo = await getAddressInfo(lat, lng);
        // 更新地图中心
        setCenter(lat, lng);

        // 更新位置信息显示
        document.getElementById('lng').textContent = lng.toFixed(6);
        document.getElementById('lat').textContent = lat.toFixed(6);
        document.getElementById('address').textContent = addressInfo.address; // 注意这里可能需要调整属性路径
        document.getElementById('locationInfo').style.display = 'block';

        // 隐藏加载提示
        hideLoading();
      } catch (error) {
        console.error("地址解析失败:", error);
        hideLoading();
        showErrorToast('地址解析失败，请检查网络');
      }
    }

    // 获取地址信息
    async function getAddressInfo(lat, lng) {
      // 返回一个新的Promise对象
      return new Promise((resolve, reject) => {
        // 验证token是否存在
        const tokenStr = localStorage.getItem("token");
        if (!tokenStr) {
          reject(new Error('未找到token，请先登录'));
          return;
        }

        let tokenData;
        try {
          tokenData = JSON.parse(tokenStr);
          if (!tokenData.data) {
            throw new Error('token格式不正确');
          }
        } catch (error) {
          reject(new Error('解析token失败: ' + error.message));
          return;
        }

        // 根据是否有经纬度选择不同的API地址
        const url = lat && lng
          ? `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=N4DBZ-Q2W37-JNHXL-PI6NN-55FH5-2BF74&get_poi=1`
          : `https://apis.map.qq.com/ws/location/v1/ip/?key=N4DBZ-Q2W37-JNHXL-PI6NN-55FH5-2BF74&get_poi=1`;

        fetch('https://www.api.nl9555.com/index/proxyForwarding', {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "token": tokenData.data,
          },
          body: JSON.stringify({ url: url })
        })
          .then(res => res.json())
          .then(res => {
            if (res.statusCode !== 200) {
              throw new Error(res.data?.message || '请求失败，状态码不为200');
            }

            // 解析返回的body内容
            try {
              const result = JSON.parse(res.body);
              // 检查地图API返回的状态
              if (result.status !== 0) {
                throw new Error(result.message || '地图API返回错误');
              }
              console.log('==>', result.result)
              resolve(result.result);
            } catch (parseError) {
              reject(new Error('解析返回数据失败: ' + parseError.message));
            }
          })
          .catch(error => {
            // 捕获所有异常并传递给reject
            reject(error);
          });
      });
    }

    // 中心地图设置
    function setCenter(lat, lng) {
      map.setCenter(new TMap.LatLng(lat, lng));
      // centerInfo.innerHTML = `当前地图中心为: ${lat},${lng}`;
    }

    // H5定位回退方案
    function initMapWithH5Location() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const { latitude, longitude } = position.coords;
            map.setCenter(new TMap.LatLng(latitude, longitude));
            showLoading();
            getAddressInfo(latitude, longitude)
              .then(info => {
                document.getElementById('lng').textContent = longitude.toFixed(6);
                document.getElementById('lat').textContent = latitude.toFixed(6);
                document.getElementById('address').textContent = info;
                document.getElementById('locationInfo').style.display = 'block';
                hideLoading();
              });
          },
          (error) => {
            console.error("获取位置失败:", error);
            showErrorToast('获取位置失败，请检查权限');
          }
        );
      } else {
        showErrorToast('浏览器不支持地理定位');
      }
    }

    // 分享功能实现
    function shareToTimeline() {
      wx.updateTimelineShareData({
        title: "发现精彩位置",
        link: window.location.href,
        imgUrl: "https://www.h5.nl9555.com/share.png",
        success: () => showSuccessToast('朋友圈分享成功'),
        fail: () => showErrorToast('分享失败')
      });
    }

    function shareToFriend() {
      wx.updateAppMessageShareData({
        title: "我的位置分享",
        desc: "点击查看我的当前位置详情",
        link: window.location.href,
        imgUrl: "https://www.h5.nl9555.com/share.png",
        success: () => showSuccessToast('好友分享成功'),
        fail: () => showErrorToast('分享失败')
      });
    }

    // UI工具函数
    function showLoading() {
      document.getElementById('loadingOverlay').style.display = 'flex';
    }

    function hideLoading() {
      document.getElementById('loadingOverlay').style.display = 'none';
    }

    // 自定义 Toast 实现
    function showToast(options) {
      const toastContainer = document.getElementById('toastContainer');
      const { title, icon = 'success', duration = 1500 } = options;

      // 设置样式类
      toastContainer.className = 'toast-container';
      if (icon === 'success') {
        toastContainer.classList.add('toast-success');
      } else if (icon === 'none') {
        toastContainer.classList.add('toast-error');
      }

      // 设置内容
      toastContainer.textContent = title;

      // 显示 Toast
      toastContainer.classList.add('show');

      // 自动隐藏
      setTimeout(() => {
        toastContainer.classList.remove('show');
      }, duration);
    }

    function showErrorToast(message) {
      showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    }

    function showSuccessToast(message) {
      showToast({
        title: message,
        icon: 'success',
        duration: 1500
      });
    }

    // 标记管理 - 腾讯地图(TMap)适配版
    // let markers = []; // 存储所有标记数据
    let multiMarker; // 声明为全局变量，与初始化代码对应

    // 清除所有标记
    function clearMarkers() {
      // 清空标记数组
      markers = [];
      // 通过MultiMarker图层清除所有标记
      if (multiMarker) {
        multiMarker.setGeometries(markers);
      }
    }

    // 页面加载初始化
    document.addEventListener("DOMContentLoaded", () => {
      initWxConfig();
    });
  </script>
</body>

</html>